<template>
  <div>
    <!-- head -->
    <el-card class="elc1">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员查询</el-breadcrumb-item>
      </el-breadcrumb>
      <h1>会员查询</h1>
    </el-card>

    <!-- body -->
    <el-card class="elc2" >
      <el-form label-width="80px" >
       <el-row >
        <el-col :span="8">
         <el-form-item label="精确查询">
          <el-select v-model="vague.value" placeholder="请选择"
            class="elc">
           <el-option
            v-for="item in vague.options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
           </el-option>
          </el-select>
         </el-form-item>
        </el-col>
        <el-col :span="11" >
          <el-input v-model="vague.input" placeholder="请输入" style="width: 350px;"></el-input>
        </el-col>
        <el-col :span="4" >
          <el-button type="primary"
          @click="getCon">查询</el-button>
          <el-button
          @click="rest">重置</el-button>
        </el-col>
      </el-row>
     </el-form>
    </el-card>

    <!-- foot -->
     <el-card class="elc3">
       <!-- 第一行 -->
       <el-row>
         <el-col :span="19">
           <span>会员列表</span>
         </el-col>
         <el-col :span="5">
           <el-button type="primary" @click="dialogFormVisible = true">+ 新建</el-button>
            <!-- 新建弹出框 -->
             <el-dialog
                class="eld"
                title="新建会员"
                :visible.sync="dialogFormVisible"
                width="600px">
                <!-- 第一行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">会员姓名</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">联系方式</span>
                  </el-col>
                </el-row>
                <!-- 第二行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model="Nmember.input1"> </el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model="Nmember.input2"> </el-input>
                  </el-col>
                </el-row>
                <!-- 第三行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">会员性别</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">会员年龄</span>
                  </el-col>
                </el-row>
                <!-- 第四行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <el-radio v-model="Nmember.radio" label="1">男</el-radio>
                    <el-radio v-model="Nmember.radio" label="0">女</el-radio>
                  </el-col>
                  <el-col :span="12">
                    <el-input  type="number" placeholder="请输入" v-model="Nmember.input3"> </el-input>
                  </el-col>
                </el-row>
                <!-- 第五行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">常用收货人</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">微信昵称</span>
                  </el-col>
                </el-row>
                <!-- 第六行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model="Nmember.input4"> </el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model="Nmember.input5"> </el-input>
                  </el-col>
                </el-row>
                <!-- 第七行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">会员等级</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">来源方式</span>
                  </el-col>
                </el-row>
                <!-- 第八行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model="Nmember.input6"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model="Nmember.input7"> </el-input>
                  </el-col>
                </el-row>
                <!-- 第七行 -->
                <el-row type="flex">
                 
                  <el-col :span="24">
                    <span class="s2">会员卡号</span>
                  </el-col>
                </el-row>
                <!-- 第八行 -->
                <el-row type="flex">
                 
                  <el-col :span="24">
                    <el-input placeholder="请输入" v-model="Nmember.input16"></el-input>
                  </el-col>
                </el-row>
                <!-- 第九行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">积分</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">下单次数</span>
                  </el-col>
                </el-row>
                <!-- 第十行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <el-input ty type="number" placeholder="请输入" v-model="Nmember.input8"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-input type="number" placeholder="请输入" v-model="Nmember.input9"></el-input>
                  </el-col>
                </el-row>
                <!-- 第十一行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">付费会员</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">下单金额</span>
                  </el-col>
                </el-row>
                <!-- 第十二行 -->
                <el-row type="flex">
                   <el-col :span="12">
                   <el-input   placeholder="请输入" v-model="Nmember.input14"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-input  type="number" placeholder="请输入" v-model="Nmember.input10"></el-input>
                  </el-col>
                </el-row>
                <!-- 第十三行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">卡内余额</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">会员备注</span>
                  </el-col>
                </el-row>
                <!-- 第十四行 -->
                <el-row type="flex">
                   <el-col :span="12">
                   <el-input  type="number" placeholder="请输入" v-model="Nmember.input11"></el-input>
                  </el-col>
                  <el-col :span="12">
                    <el-input placeholder="请输入" v-model="Nmember.input12"></el-input>
                  </el-col>
                </el-row>
                 <!-- 第十五行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <span class="s2">成为会员时间</span>
                  </el-col>
                  <el-col :span="12">
                    <span class="s2">最近登录时间</span>
                  </el-col>
                </el-row>
                <!-- 第十六行 -->
                <el-row type="flex">
                  <el-col :span="12">
                    <el-date-picker
                      v-model="Nmember.value1"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker>
                  </el-col>
                  <el-col :span="12">
                    <el-date-picker
                      v-model="Nmember.value2"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker>
                  </el-col>
                </el-row>
                <!-- 第十七行 -->
                <el-row type="flex">
                  <el-col :span="24">
                    <span class="s2">详细地址</span>
                  </el-col>
                </el-row>
                <!-- 第十八行 -->
                <el-row type="flex">
                  <el-col :span="24">
                    <el-input
                      class="eli1"
                      placeholder="请输入"
                      v-model="Nmember.input13"
                    >
                    </el-input>
                  </el-col>
                </el-row>
               
               
                <!-- 第二十行 -->
                <el-row type="flex" justify="center">
                  <el-col :span="9">
                    <el-button @click="dialogFormVisible = false" class="elb"
                      >取 消</el-button
                    >
                    <el-button
                      type="primary"
                      @click="nmember"
                      class="elb"
                      >确 定</el-button
                    >
                  </el-col>
                </el-row>
              </el-dialog>
           <el-button class="elt"
           @click="del">批量删除</el-button>
         </el-col>
       </el-row>
      <!-- 表格 -->
       <el-table
    :data="tableData"
    style="width: 100%"
    size="medium ">
    <el-table-column
      type="selection"
      width="45">
    </el-table-column>
    <el-table-column
      label="会员信息"
      width="180">
      <template slot-scope="scope" class="elk">
        <el-row>
          <el-col :span="8">
            <el-avatar :size="40" 
            :src="scope.row.circleUrl"></el-avatar>
          </el-col>
          <el-col :span="16">
        <el-link type="primary"  :underline="false"
       ><router-link  to="/home/Detail" tag="span">{{scope.row.userName}}</router-link> </el-link>
        <p>{{scope.row.phone}}</p>
          </el-col>
        </el-row>
      </template>
    </el-table-column>
    <el-table-column
      prop="userLevel"
      label="会员等级"
      width="90">
    </el-table-column>
    <el-table-column
      label="会员标签"
      width="140">
      <template slot-scope="scope" class="elk">
      <span class="span1">{{scope.row.name}}</span>   
      </template>
    </el-table-column>
    <el-table-column
      prop="score"
      label="积分"
      width="60">
    </el-table-column>
    <el-table-column
      prop="orderTimes"
      label="下单次数"
      width="80">
    </el-table-column>
    <el-table-column
      prop="orderAmount"
      label="下单金额"
      width="80">
    </el-table-column>
    <el-table-column
      prop="payUser"
      label="付费会员"
      width="80">
    </el-table-column>
    <el-table-column
      prop="balance"
      label="卡内余额"
      width="80">
    </el-table-column>
    <el-table-column
      prop="address"
      label="操作">
      <template slot-scope="scope">
        <el-link type="primary" :underline="false" 
        @click="det(scope.row.id)"
        >会员详情</el-link>
            <el-link type="primary" :underline="false"
            @click="open(scope.row.id)">
            删除</el-link>
       
      </template>
    </el-table-column>
    
  </el-table>
    <!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 15]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
     
     </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      dialogRechargeVisible: false,
      dialogTotalVisible: false,
      page: 1,
      size: 5,
      count:0,
      tableData: [],
       vague:{
          options: [{
          value: '会员卡号',
          label: '会员卡号'
        }, {
          value: '会员名称',
          label: '会员名称'
        }, {
          value: '会员电话',
          label: '会员电话'
        }, {
          value: '会员微信',
          label: '会员微信'
        }],
        input: "",
         value: "",
      },
      Nmember:{
          input1: "",
          input2: "",
          input3: "",
          input4: "",
          input5: "",
          input6: "",
          input7: "",
          input8: "",
          input9: "",
          input10: "",
          input11: "",
          input12: "",
          input13: "",
          input14: "",
          input15: "",
          input16: "",
          radio: 0 ,
          value1: "",
          value2: "",
          imageUrl:"",
      },
      recharge:{
        input1:"",
        input2:"",
        input3:"",
        input4:"",
      },
    };
  },
  methods: {
    //分页
    handleSizeChange(val) {
      this.size=val;
      this.get()
    },
    handleCurrentChange(val) {
      this.page=val
      this.get()
    },
    //模糊查询
    getCon(){
      this.$axios({
      url:'/vip/user/list',
      params:{
        username:this.vague.input,
      }
      }).then((res)=>{
        console.log(res);
        if(res.data.code==0){
          this.tableData=res.data.data
        }
      })
    },
    //重置
    rest(){
     this.vague='';
     this.get()
    },
    //查询会员列表
    get(){
      this.$axios({
       url:'/vip/user/list',
       params:{
         page:this.page,
         limit:this.size,
       }
       }).then((res)=>{
        
      this.tableData=res.data.data;
      this.count=res.data.count
    })
    },
    //新建会员
    nmember(){
      this.$axios({
        url:'/vip/user/add',
        method:'post',
        data:{
           userName:this.Nmember.input1,
           phone:this.Nmember.input2,
           sex:this.Nmember.radio,
           age:this.Nmember.input3,
           consignee:this.Nmember.input4,
           nickName:this.Nmember.input5,
           userLevel:this.Nmember.input6,
           resource:this.Nmember.input7,
           score:this.Nmember.input8,
           orderTimes:this.Nmember.input9,
           orderAmount:this.Nmember.input10,
           balance:this.Nmember.input11,
           description:this.Nmember.input12,
           address:this.Nmember.input13,
           payUser:this.Nmember.input14,
           vipNumber:this.Nmember.input16,
           created:this.Nmember.value1,
           loginTime:this.Nmember.value2,
 }
      }).then((res)=>{
       if(res.data.code==0){
        this.$message({
          message: '新建成功',
          type: 'success'
        });
        }
       this.dialogFormVisible= false,
         this.get()
      }).catch((err)=>{
        if(err){
         this.$message.error('新建失败');
        }
      })
    },
      //会员详情跳转
      det(transmit){
         this.$store.commit("transmit",transmit)
         this.$router.push('/home/Detail')
      },
      //删除
       open(id) {
         
        this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
           if(res=="confirm"){
               this.$axios({
                url:'/vip/user/delete',
                params:{
                id:id
                }
         }).then((res)=>{
           console.log(res);
          if(res.data.code==0){
           this.get()
          }
         })
           }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //批量删除
      del(){
        
      },
  },
  mounted(){
    this.get()
}
}
</script>

<style lang="less" scoped>
//head
.elc1 {
  border-bottom: 0;
  height: 100px;
}
//body
.elc2 {
  margin-bottom: 20px;
  padding-top: 20px;
 .elc{
   width: 250px;
 }
}
//foot

.elc3 {
  /deep/ .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #eee;
  }
  .span1 {
    padding: 2px 5px;
    margin-right: 10px;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .span2 {
    padding: 2px 5px;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  .el-link {
    margin-right: 15px;
  }
  .el-avatar {
    margin-top: 5px;
  }
  .elk {
    height: 50px;
    line-height: 50px;
  }
  .elt {
    margin-left: 10px;
  }
  .el-dialog {
    font-size: 14px;
    .el-row {
      margin-bottom: 10px;
    }
    .el-input {
      width: 250px;
    }
    .elp {
      width: 450px;
    }
    .eli1 {
      width: 400px;
    }
    .elb {
      margin-top: 20px;
    }
    .el-checkbox-button {
      border: 1px solid #eee;
      border-radius: 5px;
      margin: 0 5px 25px 5px;
    }
  }
  // 上传头像
    .avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar ,.el-upload__input{
    width: 100px;
    height: 100px;
    display: block;
  }
}
</style>